<template>
	<text
		:class="[name.indexOf('t-icon') >= 0 ? 't-icon' : 'iconfont', name, extraClass || '']"
		:style="
			iconSize
				? name.indexOf('t-icon') >= 0
					? { width: iconSize + 'px', height: iconSize + 'px' }
					: { 'font-size': iconSize + 'px' }
				: {}
		"
	></text>
</template>

<script>
import { ref,watch } from 'vue';
export default {
	props: {
		name: String,
		extraClass: String,
		//rpx单位
		size: Number,
	},
	setup(props) {
		const iconSize = ref(props.size ? uni.upx2px(props.size) : null);
		watch(
			() => props.size,
			(v) => {
				iconSize.value = v ? uni.upx2px(v) : null;
			}
		);
		return {
			iconSize,
		};
	},
};
</script>
